<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>ZffcBoot</title>
    <meta name="description" content="单体低代码平台">
    <meta name="author" content="zffc" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" media="screen" href="css/login/loginStyle.css">
    <link rel="stylesheet" type="text/css" href="css/login/loginReset.css"/>
</head>
<body>

<div id="particles-js">
    <div class="login">
        <div class="login-top">
            <img src="favicon.ico" width="25px" height="25px"> &nbsp; &nbsp; &nbsp; ZffcBoot
        </div>
        <div class="login-center clearfix">
            <div class="login-center-img"><img src="img/name.png"/></div>
            <div class="login-center-input">
                <input type="text"  id="username" placeholder="请输入您的用户名" onfocus="this.placeholder=''" onblur="this.placeholder='请输入您的用户名'"/>
                <div class="login-center-input-text">用户名</div>
                <sapn id="usernameError" style="color: red;display:none">用户名不能为空</sapn>
            </div>
        </div>
        <div class="login-center clearfix">
            <div class="login-center-img"><img src="img/password.png"/></div>
            <div class="login-center-input">
                <input type="password"  id="password" placeholder="请输入您的密码" onfocus="this.placeholder=''" onblur="this.placeholder='请输入您的密码'"/>
                <div class="login-center-input-text">密码</div>
                <sapn id="passwordError" style="color: red;display:none">密码不能为空</sapn>
                <sapn id="loginErrorMsg" style="color: red;display:none">用户名或密码错误</sapn>
            </div>
        </div>
        <div class="login-center clearfix">
            <div class="login-center-img"><img src="img/code.png"/></div>
            <div class="login-center-input">
                <input type="text"  id="code" style="width: 110px" placeholder="请输入验证码" onfocus="this.placeholder=''" onblur="this.placeholder='请输入验证码'"/>
                &nbsp;&nbsp;&nbsp;<img id="codeImg" onclick="getCode()">
                <div class="login-center-input-text">验证码</div>
                <sapn id="codeError" style="color: red;display:none">验证码错误</sapn>
            </div>
        </div>
        <div class="login-button">
            登录
        </div>
    </div>
    <div class="sk-rotating-plane"></div>
</div>

<!-- scripts -->
<script src="js/login/loginParticles.min.js"></script>
<script src="js/login/loginApp.js"></script>
<script src="js/common/jquery-1.8.3.min.js"></script>
<script src="js/login/login.js"></script>
<script type="text/javascript">
    let code;
    let usernameFlag,passwordFlag,codeFlag;
    $(function () {
        getCode();
    });
    function getCode() {
        $.ajax({
            type:"GET",
            url:"/common/randomImage",
            dataType:"json",
            success:function (res) {
                // console.log(res);
                code = res.message;
                $("#codeImg").attr("src",res.result);
            }
        });
    }

    function hasClass(elem, cls) {
        cls = cls || '';
        if (cls.replace(/\s/g, '').length == 0) return false; //当cls没有参数时，返回false
        return new RegExp(' ' + cls + ' ').test(' ' + elem.className + ' ');
    }

    function addClass(ele, cls) {
        if (!hasClass(ele, cls)) {
            ele.className = ele.className == '' ? cls : ele.className + ' ' + cls;
        }
    }

    function removeClass(ele, cls) {
        if (hasClass(ele, cls)) {
            var newClass = ' ' + ele.className.replace(/[\t\r\n]/g, '') + ' ';
            while (newClass.indexOf(' ' + cls + ' ') >= 0) {
                newClass = newClass.replace(' ' + cls + ' ', ' ');
            }
            ele.className = newClass.replace(/^\s+|\s+$/g, '');
        }
    }
    document.querySelector(".login-button").onclick = function(){
        addClass(document.querySelector(".login"), "active")
        setTimeout(function(){
            addClass(document.querySelector(".sk-rotating-plane"), "active")
            document.querySelector(".login").style.display = "none"
        },800)
        // 上面这一块是登录时的特效
        //下面这一块是取消登录特效
        setTimeout(function(){
            removeClass(document.querySelector(".login"), "active");
            removeClass(document.querySelector(".sk-rotating-plane"), "active");
            document.querySelector(".login").style.display = "block";
            checkUsername();
            checkPassword();
            checkCode();
            let username = $("#username").val();
            let password = $("#password").val();
            if(usernameFlag&&passwordFlag&&codeFlag){
                $.ajax({
                    type:"GET",
                    url:"/user/login",
                    data:{"username":username,"password":password},
                    dataType:"json",
                    success:function (res) {
                        if(res.message == "ok") {
                            window.location.href = "/user/toIndex"
                        }else{
                            $("#loginErrorMsg").css("display","block");
                            $("#username").val("");
                            $("#password").val("");
                            $("#code").val("");
                            $("#codeImg").click();
                        }
                    }
                });
            }
        },1500)
    }
</script>
</body>
</html>

